<!--意见汇总审批  -->
<template>
  <div class="edit-dialog">
    <el-dialog
      :title="rowData.approvalStatus == 13?'意见汇总审批':'现场论证审批'"
      :visible.sync="showArgumentDialog"
      width="40%"
      :before-close="handleClose"
      top="12"
      custom-class="dialog-box"
    >
      <el-form
        :model="queryParams"
        :rules="rules"
        ref="queryParams"
        label-width="118px"
        class="demo-ruleForm"
      >
        <el-form-item label="审核结果" prop="approvalStatus">
          <el-radio-group v-model="queryParams.approvalStatus">
            <el-radio label="14" v-if="rowData.approvalStatus == 13">通过</el-radio>
            <el-radio label="15" v-if="rowData.approvalStatus == 13">退回重申</el-radio>
            <el-radio label="17" v-if="rowData.approvalStatus == 16">通过</el-radio>
            <el-radio label="18" v-if="rowData.approvalStatus == 16">通过需修改</el-radio>
            <el-radio label="19" v-if="rowData.approvalStatus == 16">退回重申</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="approvalOpinion">
          <el-input
            type="textarea"
            v-model="queryParams.approvalOpinion"
            placeholder="请输入审核意见"
            style="width: 100%;"
            maxlength="100"
            show-word-limit
            :rows="3"
          ></el-input>
        </el-form-item>
        <div class="select-template">
          <el-dropdown trigger="click" @command="handleCommand" placement="top">
            <span class="el-dropdown-link">
              选择模版<i class="icon-arrow-down el-icon-folder-remove"></i>
            </span>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item icon="el-icon-circle-check"
              v-for="dict in selectDemoList"
              :key="dict.dictValue"
              :command="dict.dictValue"
              >{{dict.dictLabel}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-form-item :label="rowData.approvalStatus == 16?'专家签字扫描':'附件'" prop="approvalDatabase.fileName">
          <el-upload
                ref="upload"
                class="upload-demo"
                :action="upload.url"
                accept=".png, .jpg, .pdf, .zip, .rar, .7z"
                :headers="upload.headers"
                :limit="1"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
              >
                <el-input
                  v-model="queryParams.approvalDatabase.fileName"
                  style="width:100%"
                  placeholder="请选择文件"
                />
                <div class="img_box">
                  <img
                    src="@/assets/images/tripartite/icon_files_upload.png"
                    alt=""
                  />
                </div>
              </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

import { addApprovalAdd } from "@/api/tripartiteReview/reviewTask";
export default {
  name: "ArgumentDialog",
  props: {
    showArgumentDialog: {
      type: Boolean,
      default: false,
    },
    proId:{
      type: String,
      default:''
    },
    rowData:{
      type: Object,
      default:()=>{}
    }
  },
  inject: ["reload"],
  data() {
    return {
      // 表单参数
      queryParams:{approvalStatus:undefined,approvalDatabase:{fileName:'',fileUrl:''}},
      // 表单校验
      rules: {
        approvalStatus:[{ required: true, message: "请选择审核结果", trigger: "change" },],
        // approvalOpinion:[{ required: true, message: "请输入审核意见", trigger: "blur" },],
        'approvalDatabase.fileName':[{ required: true, message: "请选择文件", trigger: "change" },]
      },
      fileList: [],
      // 上传文件参数
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传文件名称
        fileName: "请选择文件",

      },
      // 选择模板数据字典
      selectDemoList:[
        { dictValue: "方案描述不充分1", dictLabel: "方案描述不充分1" },
        { dictValue: "方案描述不充分2", dictLabel: "方案描述不充分2" },
        { dictValue: "方案描述不充分3", dictLabel: "方案描述不充分3" },
      ]
    };
  },
  watch:{
    showArgumentDialog(val){
        if(val==true){
          this.reset()
        }
    },
  },
  methods: {
     // 重置表单
    reset() {
      this.queryParams = {
        approvalStatus: undefined,
        approvalOpinion: "",
        approvalDatabase: {fileName:'',fileUrl:''},
      };
      this.resetForm("queryParams");
    },
    /** 取消按钮 */
    handleClose() {
      this.$emit("changeShowDialog", "false"); //调用父组件的自定义事件，并传值
      this.reset()
    },
    /** 确定按钮 */
    submitForm() {
      console.log(this.queryParams);
      this.$refs["queryParams"].validate((valid) => {
        if (valid) {
          this.queryParams.projectId=this.proId
          addApprovalAdd(this.queryParams).then((res) => {
            this.msgSuccess("审批成功");
            this.$emit("changeShowDialog", "false");
            this.reload();
          });
        }
      })


    },
    // 选择模板内容
    handleCommand(command) {
      // console.log(9999,command);
      this.queryParams.approvalOpinion = command
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.$refs.upload.clearFiles();
      if(response.code!=500&&response.data){
        this.upload.fileName = file.name;
        this.queryParams.approvalDatabase.fileName = file.name
        this.queryParams.approvalDatabase.fileUrl=response.data.fileUrl
        this.$forceUpdate()
      }else{
        this.$message.error(response.msg)
      }
    },
  },
};
</script>

<style lang="scss">
.edit-dialog .el-form-item .el-input__inner {
  width: 100%;
}
.edit-dialog .el-form-item .el-textarea__inner {
  width: 100%;
}
/* 弹出窗样式 */
.dialog-box {
  .el-dialog__body {
    padding: 24px 48px 24px 48px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
    .last-form-item {
      margin-bottom: 0;
    }
    .inline-layout {
      display: flex;
      justify-content: space-between;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
  // 下载模板样式修改
  .select-template {
    .el-dropdown-link{
      color: #3171ee;
    }
    .icon-arrow-down{
      margin-left: 10px;
      color: #3171ee;
    }
    // width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: LEFT;
    color: #3171ee;
    margin-left: 30%;
    margin-bottom: 20px;
    cursor: pointer;
    img {
      margin-left: 10px;
    }
  }
  // 文件上传
  .upload-demo {
    .el-upload-list {
      display: none;
    }
    .el-upload {
      display: flex;
      .el-input__inner{
        width: 100%;
      }
    }
    .img_box {
      height: 37px;
      width: 36px;
      line-height: 36px;
      background: #0d72ff;
      text-align: center;
      border-radius: 0px 4px 4px 0px;
      position: absolute;
      right: -1%;
      top: 1px;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>
